<template>
  <div class="v-editor-language-select-input g-flex g-ov-hidden">
    <div class="g-flex-1 g-flex">
      <div style="flex: 1">
        <div
          v-for="(item, index) of inputItems"
          :key="index"
          class="__input-rows-row"
        >
          <div>
            <MDropdown
              style="border: 1px solid #e4e3e3; height: 30px; line-height: 30px"
              :disabled="row.readonly || isModelDisabled"
              @click="currentInputIndex = index"
            >
              <div class="g-jc-sb g-pd-lr-8">
                <div class="g-flex-1">
                  <el-input
                    v-model="item.value"
                    :disabled="row.readonly || isModelDisabled"
                    @input="handleInputing"
                    @change="handleInputChange"
                  ></el-input>
                </div>
                <div class="g-flex-0">
                  <img
                    src="statics/icons/app/iconlist2.png"
                    class="g-pointer"
                  />
                </div>
              </div>
              <template
                v-if="filterOptions.length > 0"
                #dropdown
              >
                <MDropdownMenuItem
                  v-for="(language, i) in filterOptions"
                  :key="i"
                  @click="handleClickOption(language, item)"
                >
                  <span class="g-pd-lr-8">{{ locale.value === "en" ? language.value : language.label }}</span>
                </MDropdownMenuItem>
              </template>
            </MDropdown>
          </div>
        </div>
      </div>
      <div
        v-if="!row.readonly && !isModelDisabled"
        class="_input-rows-operation-btns g-flex-0 g-lh-14 g-pd-4"
      >
        <div>
          <img
            src="statics/icons/propertyOperation/iconadd.png"
            class="g-pointer"
            @click="handleAdd"
          />
        </div>
        <div class="g-m-t-4">
          <img
            src="statics/icons/propertyOperation/iconreduce.png"
            class="g-pointer"
            @click="handleDelete"
          />
        </div>
        <div class="g-m-t-4">
          <img
            src="statics/icons/propertyOperation/iconup.png"
            class="g-pointer"
            @click="handleUp"
          />
        </div>
        <div class="g-m-t-4">
          <img
            src="statics/icons/propertyOperation/icondown.png"
            class="g-pointer"
            @click="handleDown"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PropertyRow } from "../../types";
import { modelService } from "@/modules/model/service";
import { ref, watch, reactive, inject, Ref } from "vue";
import { CodeLanguage, OpaqueLanguages } from "./ValueSpecificationTypes";
import { propertyUtil } from "../../PropertyUtil";
import { BusEvent } from "@/constants/Enums";
import { debounce } from "lodash-es";
import { arrayEqual } from "@/util/common";
import MDropdown from "@/common/dropdown/Dropdown.vue";
import MDropdownMenuItem from "@/common/dropdown/DropdownMenuItem.vue";
import { locale } from "@/util/locale";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();

const filterOptions = ref<CodeLanguage[]>(OpaqueLanguages);
const inputItems = reactive((props.row.value as string[]).map(it => ({ value: it })));
const currentInputIndex = ref<undefined | number>();
const saveValue = debounce(async () => {
  const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow(props.row, app.activeProject!.id);
  dto.value = inputItems.map(it => it.value);
  if (arrayEqual(dto.value, props.row.value as string[])) {
    return;
  }
  let res = await modelService.updateModelProperty(dto);

  if (res) {
    app.$bus.emit(BusEvent.REFRESH_PROPERTY, props.row.modelId);
  }
}, 50);

watch(
  () => props.row.value,
  () => {
    inputItems.splice(0, inputItems.length, ...(props.row.value as string[]).map(it => ({ value: it })));
  }
);

function handleInputing(val: any) {
  filterOptions.value = OpaqueLanguages.filter(item => item.label.toLowerCase().indexOf(val.toLowerCase()) > -1);
}

function handleInputChange() {
  saveValue();
}

function handleAdd() {
  inputItems.push({ value: "" });
  currentInputIndex.value = inputItems.length - 1;

  saveValue();
}

function handleDelete() {
  if (currentInputIndex.value === undefined) return;
  inputItems.splice(currentInputIndex.value, 1);
  currentInputIndex.value = undefined;
  saveValue();
}

function handleUp() {
  if (currentInputIndex.value === undefined || currentInputIndex.value === 0) return;
  const cur = inputItems[currentInputIndex.value];
  const pre = inputItems[currentInputIndex.value - 1];
  inputItems[currentInputIndex.value - 1] = cur;
  inputItems[currentInputIndex.value] = pre;
  currentInputIndex.value--;
  saveValue();
}

function handleDown() {
  if (currentInputIndex.value === undefined || currentInputIndex.value === inputItems.length - 1) return;
  const cur = inputItems[currentInputIndex.value];
  const next = inputItems[currentInputIndex.value + 1];
  inputItems[currentInputIndex.value + 1] = cur;
  inputItems[currentInputIndex.value] = next;
  currentInputIndex.value++;
  saveValue();
}

function handleClickOption(item: CodeLanguage, row: any) {
  row.value = item.label;
  saveValue();
}
</script>
<style lang="scss" scoped>
.v-editor-language-select-input {
  display: flex;
  .__input-rows-row {
    border-bottom: 1px solid #ddd;
    &:last-of-type {
      border-bottom: none;
    }
  }
  ._input-rows-operation-btns {
    border-left: 1px solid #ddd;
  }
  :deep(.el-input__wrapper) {
    background: inherit;
    border-color: rgb(228, 227, 227);
  }
}
._current-row {
  .v-editor-language-select-input {
    .__input-rows-row {
      &:last-of-type {
        border-bottom: 1px solid #ddd;
      }
    }
  }
}
.__drop-rows {
  display: flex;
  flex-direction: column;
}
.el-input__wrapper {
  background: inherit;
}
.__input-row {
  background: inherit;
}
</style>
